<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>Fast food TMC</title>
  
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<script type="text/javascript" src="js/navigation.js" ></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js" ></script>
    
  
    <link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
		<script type="text/javascript" src="js/mousewheel.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/sliding_effect.js"></script> 
		<script type="text/javascript">
			$(document).ready(function() {
				$('#slider').rhinoslider({
					effect: 'shuffle',
					controlsPlayPause: false,
					autoPlay: true
				});
			});
		</script>
        
		<style type="text/css">
		
			
			#slider {
				width:600px;
				height:250px;
				
				/*IE bugfix*/
				padding:0;
				margin:0;
			}
			
			#slider li { list-style:none; }
			
			#page {
				width:600px;
				float:left;
				margin:0px 0px 0px 0px;
			}
		</style>
        <style>
			body{background: url(img/hinh-nen-may-tinh-hd-9.jpg)fixed; background-size:cover;}
		</style>
        <script type="text/javascript">
	
		$(function(){
			
			$("#sale-button").css({
				opacity: 0.3
			});
			$("#special-button").css({
				opacity: 0.3
			});
		
			$("#page-wrap div.button").click(function(){
				
				$clicked = $(this);
				
				// if the button is not already "transformed" AND is not animated
				if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
					
					$clicked.animate({
						opacity: 1,
						borderWidth: 5
					}, 600 );
					
					// each button div MUST have a "xx-button" and the target div must have an id "xx" 
					var idToLoad = $clicked.attr("id").split('-');
					
					//we search trough the content for the visible div and we fade it out
					$("#fader").find("div:visible").fadeOut("fast", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
					})
				}
				
				//we reset the other buttons to default style
				$clicked.siblings(".button").animate({
					opacity: 0.5,
					borderWidth: 1
				}, 600 );
			});
		
		});
		
	</script>
   
</head>
<body>
<div id="header"></div>
	<div id="navigation" class="container">
	  <div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>
		<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
		<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
		<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
		<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
	</div>    
	<div class="container">
		<div class="content">
			<div id="page">
				<ul id="slider">
                    <li><img class="img" src="img/1.jpg" alt="" /></li>
                    <li><img class="img" src="img/2.jpg" alt="" /></li>
                    <li><img class="img" src="img/3.jpg" alt="" /></li>
                    <li><img class="img" src="img/4.jpg" alt="" /></li>
                    <li><img class="img" src="img/5.jpg" alt="" /></li>
				</ul>
        	</div>
            <div id="navigation-block">
                <ul id="sliding-navigation">
                    <li class="sliding-element"><h3>Menu</h3></li>
                    <li class="sliding-element"><a href="#">Ăn sáng</a></li>
                    <li class="sliding-element"><a href="#">Ăn Trưa</a></li>
                    <li class="sliding-element"><a href="#">Dinh dưỡng mỗi ngày</a></li>
                    <li class="sliding-element"><a href="#">Khoái khẩu</a></li>
                    <li class="sliding-element"><a href="#">Đặc biệt</a></li>
                </ul>
    		</div>
		</div>
	</div>
     
     <div id="page-wrap">
		
		<div id="sanpham-button" class="button">
			<img src="img/SanPham.png" alt="home" class="button" />
		</div>
		<div id="sale-button" class="button">
			<img src="img/KhuyenMai.png" alt="about" class="button">
		</div>

		<div id="special-button" class="button">
			<img src="img/DocLa.png" alt="contact" class="button">
		</div>
		
		<div class="clear"></div>
		
		<div id="fader">
			<div id="sanpham">
            	 <img class="blacksheep" src="img/DanhMuc/image001.jpg" />            	
                 <img class="blacksheep" src="img/DanhMuc/image003.jpg" />
                 <img class="blacksheep2" src="img/DanhMuc/image005.jpg" />
                 <a href="#">Vui lòng ấn vào đây để xem tiếp các sản phẩm còn lại</a>
			</div>
			<div id="sale">
                 <a href="#">Hiện chưa có dịch vụ khuyến mãi vui lòng bấm vào đây để biết thêm chi tiết</a>
			</div>		
			<div id="special">
            	 <img class="blacksheep" src="img/Special/image009.jpg" />
                 <img class="blacksheep" src="img/Special/image013.jpg" />
                 <img class="blacksheep2" src="img/Special/image018.jpg" />
                 <a href="#">Vui lòng ấn vào đây để xem tiếp các sản phẩm còn lại</a>
			</div>
		</div>
	</div>
    <div class="footer">
    </div>
    
</body>


